<!DOCTYPE HTML>
<html style="width:100%; height:100%; margin:0px; padding:0px" xml:lang="en" lang="en">
  <head>
    <!--
    This HTML page is meant to host the client side of a collaborative
    edit session. It also includes a div-element for listing members of
    the editing session.
    This page tries to connect-back to the collab-serving enabled httpd
    serving it. That server there is expected to provide a list of
    sessions which are offered in a simple list and can be joined.
    This page is meant to be served out of a webodf build directory.
    -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Collaborative Editor</title>

    <!-- dojo setup: start -->
    <script type="text/javascript">
      var usedLocale = "C";
      if (navigator && navigator.language && navigator.language.match(/^(ru|de)/)) {
        usedLocale = navigator.language.substr(0,2);
      }

      dojoConfig = {
        locale: usedLocale,
        paths: {
          "webodf/editor": ".",
          "dijit": "dijit",
          "dojox": "dojox",
          "dojo": "dojo",
          "resources": "resources"
        }
      }
    </script>

    <script src="dojo-amalgamation.js" data-dojo-config="async: true"></script>
    <link rel="stylesheet" type="text/css" href="app/resources/app.css"/>
    <!-- dojo setup: end -->

    <!-- editor: start -->
    <link rel="stylesheet" type="text/css" href="wodotexteditor.css"/>
    <link rel="stylesheet" type="text/css" href="wodocollabpane.css"/>
    <script src="webodf.js" type="text/javascript" charset="utf-8"></script>
    <script src="wodocollabtexteditor.js" type="text/javascript" charset="utf-8"></script>
    <script src="pullboxeditor.js" type="text/javascript" charset="utf-8"></script>
    <!-- editor: end -->
  </head>

  <body style="width:100%; height:100%; margin:0px; padding:0px" onload="createEditor();">
    <!-- 3 pages, switching between them is controlled by setting the style's display value -->

    <!-- Login page: start -->
    <div id="loginContainer" style="display: none; text-align: center">
      <form name="loginForm">
        <p>Login:<br><input name="login" type="text" size="30" maxlength="30"></p>
        <p>Password:<br><input name="password" type="password" size="30" maxlength="40"></p>
        <input name="Submit"  type="submit" value="Let me!"/>
      </form>
    </div>
    <!-- Login page: start -->

    <!-- Session list page: start -->
    <div id = "sessionListContainer" style="display: none; text-align: center">
      <h1>Sessions</h1>
      <div id="sessionList"></div>
    </div>
    <!-- Session list page: end -->

    <!-- Editor page: start -->
    <div id="editorContainer" style="display: none; width:100%; height:100%; margin:0px; padding:0px">
    </div>
    <!-- Editor page: end -->
  </body>
</html>
